<script setup lang="ts">
import useMsgSend from '@/components/index/message/hooks/msgSend'
const { textarea, sendMessage, readerPaste } = useMsgSend()
</script>

<template>
  <div>
    <ul>
      <li>
        <svg class="svg" viewBox="0 0 496 512" xmlns="http://www.w3.org/2000/svg">
          <path
            d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
          />
        </svg>
      </li>
    </ul>
    <span id="send">
      <p @click.prevent="sendMessage">发送</p>
    </span>
  </div>
  <section
    contenteditable="true"
    ref="textarea"
    @paste="readerPaste($event)"
    @keyup.enter.prevent="sendMessage"
  ></section>
</template>

<style scoped lang="less">
div {
  padding: 0 10px;
  position: relative;
  margin: 6px 0;
}
.svg {
  fill: var(--color2);
  width: 24px;
  height: 24px;
  color: var(--color2);
}
#send {
  float: right;
  height: 20%;
  width: 10%;
  line-height: 30px;
  text-align: center;
  > p:hover {
    background-color: var(--color3);
    color: var(--color-font);
  }
  > p {
    cursor: pointer;
    background-color: var(--color2);
    color: var(--color3);
    border-radius: var(--radius);
  }
}
ul {
  display: inline-flex;
  align-items: center;
  height: 30px;
  width: 80%;
  list-style: none;
  box-sizing: border-box;

  li {
    cursor: pointer;
    margin: 0 6px;
    width: 24px;
    height: 24px;
  }
}
section {
  resize: none;
  height: 80%;
  width: 100%;
  border: 1px dashed var(--color2);
  padding: 10px;
  box-sizing: border-box;
  border-radius: 0 0 var(--radius) var(--radius);
  background-color: var(--color1);
  color: var(--color3);
}
section:focus {
  border: 1px dashed var(--color2);
  outline: none;
}
</style>
